<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .layui-input-block {
            margin-left: 0;
        }

        .layui-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 60px;
        }

        .layui-btn {
            height: 50px;
            width: 135px;
            font-size: 20px;
            border-radius: 10px;
        }

        .drawingInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0px;
        }

        .layui-form-label {
            width: 85px;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs4 drawingInfo">
        <div style="display: flex;align-items: center;justify-content: center;font-size: 22px;color: brown;">
            <span>档案信息</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">档案名</label>
            <div class="layui-input-inline">
                <div id="fileName" style="color: brown;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">档案分类</label>
            <div class="layui-input-inline">
                <div id="typeName"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">年度</label>
            <div class="layui-input-inline">
                <div id="year"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">责任人</label>
            <div class="layui-input-inline">
                <div id="userName"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">档案简介</label>
            <div class="layui-input-inline">
                <div id="profile"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">档案状态</label>
            <div class="layui-input-inline">
                <div id="status"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">区域位置</label>
            <div class="layui-input-inline">
                <div id="areaName"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">载体名称</label>
            <div class="layui-input-inline">
                <div id="areaCode"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">列号</label>
            <div class="layui-input-inline">
                <div id="columnNumber" style="color: brown;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">密集架区</label>
            <div class="layui-input-inline">
                <div id="denseRackRegion" style="color: brown;"></div>
            </div>
        </div>

        <div class="layui-form-item cabinet_column_item">
            <label class="layui-form-label required">节数</label>
            <div class="layui-input-inline">
                <div id="joint" style="color: brown;"></div>
            </div>
        </div>
        <div class="layui-form-item dense_rack_region_item">
            <label class="layui-form-label required">层数</label>
            <div class="layui-input-inline">
                <div id="layerNumber" style="color: brown;"></div>
            </div>
        </div>
        <div class="layui-form-item group_num_item">
            <label class="layui-form-label required">位置</label>
            <div class="layui-input-inline">
                <div id="position" style="color: brown;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs8">
        <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 50px;">
            <img src="/img/archives/scanning.png" alt="扫码枪" style="width: 256px;height: 256px;">
        </div>

        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" id="qrCode" name="qrCode" style="width: 400px;"
                           placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <span style="font-size: 30px;color: cadetblue;">请扫描二维码</span>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="outbound" id="outbound">出库</button>
                    <button type="button" class="layui-btn layui-bg-blue" lay-submit lay-filter="warehousing" id="warehousing">入库</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    var $ = layui.jquery;
    var uuid = "";

    $(document).ready(function () {
        $("#qrCode").focus();
    });

    layui.use(['form', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        // 出库
        form.on('submit(outbound)', function (data) {
            if (uuid != null) {
                data.field["uuid"] = uuid;
                let loading = layer.load();
                $.ajax({
                    url: '/archives/scanning/gun/out',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 200) {
                            layer.msg(result.message, {icon: 1, time: 2000}, function () {
                                parent.layui.table.reload("archivesTable");
                                $("#qrCode").focus();
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 2000});
                        }
                    }
                })
            }
            return false;
        });
        // 入库
        form.on('submit(warehousing)', function (data) {
            if (uuid != null) {
                data.field["uuid"] = uuid;
                let loading = layer.load();
                $.ajax({
                    url: '/archives/scanning/gun/in',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 200) {
                            layer.msg(result.message, {icon: 1, time: 2000}, function () {
                                parent.layui.table.reload("archivesTable");
                                $("#qrCode").focus();
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 2000});
                        }
                    }
                })
            }
            return false;
        });
    });

    // 扫码出库
    function scanCode() {
        var str = ""; //  暂存字符串
        var timeout = 100; //  超时时间，毫秒
        var lastStamp = new Date().getTime(); //  记录按键最后触发时间戳 毫秒
        function keypress(e) {
            var keycode = e.which || e.keyCode; //   兼容不同内核浏览器， e.keyCode IE内核， e.which非IE内核
            var realkey = String.fromCharCode(keycode);
            var now = new Date().getTime();
            var tmdiff = now - lastStamp;
            // console.log('按键码:' + keycode + '; 字符:' + realkey + '; 时间差(ms):' + tmdiff);
            if (tmdiff > timeout) {
                //  按键间隙超过timeout，就丢弃之前的按键数据,直接替换
                str = realkey;
                lastStamp = now;
                return;
            }
            //监听Enter键，即回车键
            if (keycode == 13) {
                if (str != "") {
                    // console.log('扫码枪数据:' + str);
                    uuid = str;
                    $.get("/archives/scanning/info", {"uuid": uuid}, function (result) {
                        $("#qrCode").val("");
                        if (result.code === 200) {
                            $("#fileName").text(result.data.fileName);
                            $("#year").text(result.data.year);
                            $("#userName").text(result.data.userName);
                            $("#profile").text(result.data.profile);
                            $("#status").text(result.data.status);
                            $("#createTime").text(result.data.createTime);
                            $("#areaCode").text(result.data.areaCode);
                            $("#columnNumber").text(result.data.columnNumber);
                            $("#denseRackRegion").text(result.data.denseRackRegion);
                            $("#joint").text(result.data.joint);
                            $("#layerNumber").text(result.data.layerNumber);
                            $("#position").text(result.data.position);
                            $("#areaName").text(result.data.areaName);
                            $("#typeName").text(result.data.typeName);

                            if (result.data.statusCode == 0) {
                                $("#outbound").css("display", "");
                                $("#warehousing").css("display", "none");
                            } else {
                                $("#outbound").css("display", "none");
                                $("#warehousing").css("display", "");
                            }
                        } else {
                            layer.msg("未找到数据", {icon: 2, time: 3000})
                        }
                    })
                    str = "";
                }
            } else {
                str = str + realkey;
            }
            lastStamp = now;
        }
        document.onkeypress = keypress;
    }

    scanCode();
</script>

</body>
</html>